import React from 'react';
import Page from '../../component/page';
import SampleData from './nameDB';

import {
    //main component
    SearchBar,
    //for display data
    Panel,
    PanelHeader,
    PanelBody,
    PanelFooter,
    MediaBox,
    MediaBoxHeader,
    MediaBoxBody,
    MediaBoxTitle,
    MediaBoxDescription,
    Cell,
    CellBody,
    CellFooter
} from '../../../build/packages';

const appMsgIcon = <img src="" />

const CellMore = () => (
    <Cell access link>
        <CellBody>More</CellBody>
        <CellFooter />
    </Cell>
)

export default class SearchBarDemo extends React.Component {
    state={
        searchText: 'a',
        results: []
    };

    handleChange(text, e){
        let keywords = [text];
        let results = SampleData.filter(/./.test.bind(new RegExp(keywords.join('|'),'i')));

        if(results.length > 3) results = results.slice(0,3);
        this.setState({
            results,
            searchText:text,
        });
    }

    render() {
        return (
            <Page className="searchbar" title="SearchBar" subTitle="搜索栏">
                <SearchBar
                    onChange={this.handleChange.bind(this)}
                    defaultValue={this.state.searchText}
                    placeholder="Female Name Search"
                    lang={{
                        cancel: 'Cancel'
                    }}
                />

                <Panel style={{display: this.state.searchText ? null: 'none', marginTop: 0}}>
                    <PanelHeader>
                        Female Name Search
                    </PanelHeader>
                    <PanelBody>
                        {
                            this.state.results.length > 0 ?
                                this.state.results.map((item,i)=>{
                                    return (
                                        <MediaBox key={i} type="appmsg" href="javascript:void(0);">
                                            <MediaBoxHeader>{appMsgIcon}</MediaBoxHeader>
                                            <MediaBoxBody>
                                                <MediaBoxTitle>{item}</MediaBoxTitle>
                                                <MediaBoxDescription>
                                                    You may like this name.
                                                </MediaBoxDescription>
                                            </MediaBoxBody>
                                        </MediaBox>
                                    )
                                })
                                : <MediaBox>Can't find any！</MediaBox>
                        }
                    </PanelBody>
                    <PanelFooter href="javascript:void(0);">
                        <CellMore />
                    </PanelFooter>
                </Panel>
            </Page>
        );
    }
};
